<template>
    <div class="bjs">
        <div class="headers">
            <div class="toheader">
                <div class="left">
                    <div class="yuan">
                        <van-image round width="70px" height="70px" :src="arr.avatar"/>
                    </div>
                    <p>{{ arr.nickname }}</p>
                </div>
                <div class="right">
                    <van-button round type="info" size="mini" @click="tz">编辑资料</van-button>
                </div>
            </div>
            <div class="tobutton">
                <div class="toleft">
                    <div>{{ list.publish_num }}</div>
                    <div>头条</div>
                </div>
                <div class="toright">
                    <div>{{ list.liked_num }}</div>
                    <div>获赞</div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="aleft">
                <div class="cc"><van-icon name="star-o" /></div>
                <div class="aa">收藏</div>
            </div>
            <div class="aright">
                <div class="cc"><van-icon name="underway-o" /></div>
                <div class="aa">历史</div>
            </div>
        </div>
        <div class="nr">
            <van-cell title="修改密码" is-link/>
            <van-cell title="联系我们" is-link/>
            <van-cell title="关于我们" is-link/>
        </div>
        <van-button class="tc" type="primary" @click="quit">退出登录</van-button>
    </div>
</template>
<script>
import { getToken,removeToken }from '@/until/auth'

export default ({
    data(){
        return{
            list:{},
            arr:{}
        }
    },
    methods:{
        tz(){
            this.$router.push('/user')
        },
        quit(){
            removeToken('token')
            let token = getToken()
            this.$http.post('/user/getuserInfo',{
                token
            })
            .then((res)=>{
                this.list = res
                this.arr = res.userInfo
            })
            .catch((error)=>{
                console.log(error)
            })
        }
    },
    created(){
        let token = getToken()
        this.$http.post('/user/getuserInfo',{
            token
        })
        .then((res)=>{
            this.list = res
            this.arr = res.userInfo
        })
        .catch((error)=>{
            console.log(error)
        })
    }
})
</script>
<style>
.bjs{
    background-color: #f5f7f9;
}
.headers{
    height: 180px;
    width: 100%;
    background-image: url('@/assets/banner.jpg');
    background-size: 100% 180px;
}
.toheader{
    height:132px;
}
.left{
    height: 132px;
    float: left;
    padding-left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.yuan{
    width: 70px;
    height: 70px;
    background-color: #fff;
    border-radius: 999px;
    position: relative;
}
.left p{
    color: #fff;
    padding-left: 11px;
    font-size: 13px;
}
.right{
    height: 132px;
    float: right;
    padding-right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.right .van-button--info{
    background-color: #fff;
    color:#976666;
    border: 1px solid #fff;
    height: 16px;
    font-size: 12px;
}
.tobutton{
    height: 48px;
}
.toleft{
    float: left;
    width: 50%;
    text-align: center;
    color: #fff;
    font-size: 11px;
}
.toright{
    width: 50%;
    float: right;
    text-align: center;
    color: #fff;
    font-size: 11px;
}
.content{
    height: 70px;
    padding-top: 10px;
    background-color: #fff;
}
.aleft{
    float: left;
    width: 45%;
    text-align: center;
    color: #eb5a63;
    font-size: 11px;
}
.aright{
    width: 45%;
    float: right;
    text-align: center;
    color: #ffd08a;
    font-size: 11px;
}
.aa{
    padding-top: 12px;
    color: black;
}
.cc{
    font-size: 23px;
}
.nr{
    padding-top: 5px;
    padding-bottom: 5px;
}
.tc{
    width: 100%;
    background-color: #fff;
    border: 1px solid #fff;
    color: #d86262;
}
</style>